// 动态加载时间线项目
const timelineData = [
    {
        date: "12月21日",
        year: "2023",
        title: "冬至",
        time: "14:30",
        content: "今天是冬至，按照传统习俗吃饺子。窗外飘着小雪，整个世界都安静下来了。",
        image: "assets/images/winter.jpg",
        tags: ["生活", "节气"],
        likes: 23,
        comments: 12,
        likedBy: new Set() // 用于存储已点赞的用户
    },
    {
        date: "12月22日",
        year: "2023",
        title: "冬至后的思考",
        time: "10:00",
        content: "冬至过后，日子开始慢慢变长，思考过去一年的收获与不足。",
        image: "assets/images/winter_reflection.jpg",
        tags: ["生活", "反思"],
        likes: 15,
        comments: 5,
        likedBy: new Set()
    },
    {
        date: "12月23日",
        year: "2023",
        title: "节日的温暖",
        time: "18:00",
        content: "与家人一起享受节日的晚餐，感受温暖的家庭氛围。",
        image: "assets/images/start.png",
        tags: ["家庭", "节日"],
        likes: 30,
        comments: 8,
        likedBy: new Set()
    },
];

const timelineContainer = document.getElementById('timeline');

timelineData.forEach((item, index) => {
    const timelineItem = document.createElement('article');
    timelineItem.className = 'timeline-item';
    timelineItem.innerHTML = `
        <div class="timeline-date">
            <span class="date">${item.date}</span>
            <span class="year">${item.year}</span>
        </div>
        <div class="timeline-card">
            <div class="card-header">
                <h3>${item.title}</h3>
                <span class="time">${item.time}</span>
            </div>
            <div class="card-content">
                <p>${item.content}</p>
                <figure class="card-image">
                    <img src="${item.image}" alt="${item.title}的场景" loading="lazy">
                </figure>
                <footer class="card-footer">
                    <div class="tags">
                        ${item.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                    </div>
                    <div class="interactions">
                        <button class="like-btn" aria-label="点赞" data-index="${index}">
                            <svg viewBox="0 0 24 24" class="like-icon">
                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                            </svg>
                            <span>${item.likes}</span>
                        </button>
                        <button class="comment-btn" aria-label="评论" data-index="${index}">
                            <svg viewBox="0 0 24 24">
                                <path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/>
                            </svg>
                            <span>${item.comments}</span>
                        </button>
                    </div>
                </footer>
            </div>
        </div>
    `;
    timelineContainer.appendChild(timelineItem);
});

// 处理点赞按钮的点击事件
document.querySelectorAll('.like-btn').forEach(button => {
    button.addEventListener('click', function() {
        const index = this.getAttribute('data-index');
        const userId = 'user123'; // 假设这是当前用户的唯一标识符

        if (!timelineData[index].likedBy.has(userId)) {
            timelineData[index].likes++;
            timelineData[index].likedBy.add(userId); // 添加用户到已点赞集合
            this.querySelector('span').textContent = timelineData[index].likes; // 更新点赞数
            this.querySelector('.like-icon').style.fill = 'red'; // 改变图标颜色
        } else {
            timelineData[index].likes--;
            timelineData[index].likedBy.delete(userId); // 从已点赞集合中移除用户
            this.querySelector('span').textContent = timelineData[index].likes; // 更新点赞数
            this.querySelector('.like-icon').style.fill = 'black'; // 恢复图标颜色
        }
    });
});

// 处理评论按钮的点击事件
document.querySelectorAll('.comment-btn').forEach(button => {
    button.addEventListener('click', function() {
        const index = this.getAttribute('data-index');
        // 这里可以添加弹出评论框的逻辑
        alert(`评论功能尚未实现，当前评论数：${timelineData[index].comments}`);
    });
}); 